<script setup lang="ts">
import {postAction} from '@/utils/request';

const {proxy} = getCurrentInstance() as ComponentInternalInstance;

const user = reactive({
  email: undefined,
  password: undefined,
  code: undefined,
});
const rules = ref({
  email: [{required: true, message: '邮箱不能为空', trigger: 'blur'}],
  password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
});

const sendCode = () => {
  postAction('/auth/mail/send/bind', user);
}

/** 提交按钮 */
const submit = () => {
  postAction('/auth/mail/verify/bind', user);
};

/** 关闭按钮 */
const close = () => {
  proxy?.$tab.closePage(undefined);
};
</script>

<template>
  <el-form ref="pwdRef" :model="user" :rules="rules" label-width="80px">
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="user.email" placeholder="请输入邮箱"/>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="user.password" placeholder="请输入密码" type="password" show-password/>
    </el-form-item>
    <el-form-item label="验证码" prop="code">
      <el-input v-model="user.code" placeholder="请输入验证码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="sendCode">发送验证码</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
      <el-button type="danger" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>
